<script lang="ts">
import img1 from "../img/10037.jpg"
import img2 from "../img/10038.jpg"
import img3 from "../img/10039.jpg"
import img4 from "../img/10030.jpg"
import img5 from "../img/10040.jpg"
import img6 from "../img/10041.jpg"
import img7 from "../img/10033.jpg"
import img8 from "../img/10034.jpg"
import img9 from "../img/10035.jpg"
import img10 from "../img/10036.jpg"


export default {
    data(){
        return {
            // 当前显示项目索引
            currentIndex:0,
            //// 图片及文字项的总数
            totalItems: 10,
            displayCount: 4,
            imageTextItems:{
               0: {img:img1,title:'快递贩卖机',description:'随着互联网的普及和发展，网上购物逐渐成为人们日常购物的习惯方式。尤其是近年来兴起的618、双11、双12购物狂欢节，网上购物交易量逐年递增，直接拉动了网购市场的经济。与此同时，快递行业呈井'},
               1: {img:img2,title:'监控精密生产视频',description:'数据采集：工控机通过网络接口或者其他接口接收前端设备发送的视频数据，并将其转化为数字信号进行处理和存储。数据传输：工控机通过网络或者其他方式将处理后的视频数据传输到中心处理器或者'},
               2:{img:img3,title:'太阳能系统',description:'工控机可以连接光伏组件上的传感器，实时采集光伏系统的电流、电压、温度等关键数据。它能够时刻监控太阳能板的状态，了解它们的工作情况。这些数据对于监测光伏系统的性能、检测故障以及进行预测'},
               3:{img:img4,title:'工业智能操控',description:'工控机在智能制造工厂的应用还是很受欢迎的，实现了自动化与信息化的桥梁。随着工业4.0的兴起，智能工厂成为制造业转型升级的重要方向，在这一过程中，工控机扮演者至关重要的角色，工控机是专为...'},
               4:{img:img5,title:'物流车间网',description:'1.数据采集与处理：工控一体机可以实时采集和处理大量的物流数据，包括订单信息、运输轨迹、仓库库存、设备状态等。通过对这些数据的分析，企业可以实时掌握物流运作的实际情况，及时发现并解决..'},
               5:{img:img6,title:'数字标牌系统',description:'数字标牌是指在大型商超、便利店、地铁、酒店、机场等人流汇聚的公共场所，通过不同类型的终端显示设备发布商业、时政、财经、娱乐以及其他定制信息的多媒体视听系统。'},
               6:{img:img7,title:'机场酒店商超',description:'在航空生产过程中，对生产流程的精确控制至关重要。工控一体机通过集成先进的控制系统，能够实现对生产设备的精确控制，从而提高生产效率，确保产品质量。同时，通过对生产过程的实时监控，可以及...'},
               7:{img:img8,title:'智能厅室',description:'没有门禁卡，不用钥匙，无需指纹，凭借张脸就可以顺利通过写字楼、小区、工厂、校园等大门。人脸识别因其安全、便捷、智能的特点，如今已逐渐成为安防通行管理的主流，被广泛应用在各行各业，如..'},
               8:{img:img9,title:'智能医疗',description:'随着科技的不断进步，工控机在医疗健康领域的应用越来越广泛。工控机在医疗健康领域的应用，不仅可以提高医疗服务的效率，还可以为医生提供更加准确的诊断结果，为患者提供更好的治疗效果。'},
               9:{img:img10,title:'门禁监控',description:'门禁及安防系统是用来保护人类和财产安全的，因此系统自身必须安全可靠。这里所说的高安全，一方面是指产品或系统的安全性，应该保证设备、系统运行的安全和操作者的安全，例如：设备和系统本身要.'},
            }
    };
    },
    computed: {
  displayedItems() {
    const itemsArray = Object.values(this.imageTextItems);
    const start = this.currentIndex;
    let displayed = itemsArray.slice(start, start + this.displayCount);
    
     // 如果不足四张，从第一张补齐
     if (displayed.length < this.displayCount) {
      displayed = displayed.concat(itemsArray.slice(0, this.displayCount - displayed.length));
    }
    
    return displayed;
  }
},
methods: {
  nextImage() {
    this.currentIndex = (this.currentIndex + 1) % this.totalItems;
  },
  prevImage() {
    this.currentIndex = (this.currentIndex - 1 + this.totalItems) % this.totalItems;
  }
}
}
</script>

<template>
    <h1 class="title"><span>服务</span>领域</h1>
    <h2 class="small-title">SERVICE AREA</h2>
    <div class="image-text-container">
        <span class="left-button" @click="prevImage">&lt;</span>
        <div
        class="image-text-item"
        v-for="(item, index) in displayedItems"
        :key="index"
      >
        <img :src="item.img" alt="" class="uniform-image">
        <h1>{{ item.title }}</h1>
        <p>{{ item.description }}</p>
      </div>
        <span class="right-button" @click="nextImage">&lt;</span>
    </div>
    <h1 class="img_title">专业服务 预算合理 方案灵活</h1>
    <h2 class="small-title">Professional service reasonable budget and flexible solutions</h2>
    <div class="bottom_img_area">
        <img src="../img/10042.png" alt="" class="bottom_img">
        <div class="bottom_img_title">
            <div class="words-row1">
                <span>资深的专业人才与团队</span>
                <span>丰富经验与创新</span>
                <span>高效沟通与协作</span>
                <span>客户至上的服务态度</span>
            </div>
            <div class="words-row2">
                <div class="half">
                    <span>作为一家年轻而富有活力的企业，我们拥有敏锐的市场洞察力和高效的执行力。我们紧跟市场脉搏能够快速响应市场变化，不断调整和优化产品策略，以满足客户的个性化需求</span>
                    <button class="learn-more-button">点击了解更多</button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
@import '../css/containerservice.css';
</style>
